<template>
  <iBizControlBase :controller="c" :class="[ns.b(c.model.name), ns2.b()]">
    <!-- 绘制默认列表 -->
    <template v-if="c.state.isCreated && mode === 'LIST'">
      <uni-list>
        <template v-for="item in c.state.items" :key="item.id">
          <!-- 绘制项 -->
          <IBizControlShell
            v-if="c.model.itemLayoutPanel"
            :data="item"
            :modelData="c.model.itemLayoutPanel"
            :context="c.context"
            :params="c.params"
            @click="() => c.onRowClick(item)"
          ></IBizControlShell>
          <uni-list-item
            v-else
            :class="calcItemClass(item)"
            :title="item.srfmajortext || ''"
            showArrow
            :@click="() => c.onRowClick(item)"
          >
            <image
              v-if="Object.prototype.hasOwnProperty.call(item, 'image')"
              :class="ns.b('image')"
              :src="item.image"
              alt=""
            ></image>
            <radio :class="ns.bm('item', 'right')" :checked="isSelect(item)" />
          </uni-list-item>
        </template>
      </uni-list>
    </template>
    <!-- 绘制选择列表 -->
    <template v-else>
      <!-- 绘制卡片内容 -->
      <template v-for="(item, index) in c.state.items" :key="item.id">
        <!-- 绘制展开 -->
        <view
          v-if="index === props.rowsCount * props.columnsCount - 1"
          :class="[ns.b('item'), ns.b('item-expand')]"
          @click="openReviewList"
        >
          展开
        </view>
        <!-- 绘制默认列表项 -->
        <view v-else>
          <uni-tag
            @click="c.onRowClick(item)"
            :is="ns.e('tag')"
            @dblclick="c.onDbRowClick(item)"
            plain
            size="large"
            type="primary"
          >
            <text :class="ns.e('item-text')">{{ item.srfmajortext || '' }}</text>
          </uni-tag>
        </view>
      </template>
      <!-- 绘制查看列表 -->
      <uni-popup
        :class="ns.b('popup')"
        ref="reviewListRef"
        type="share"
        safeArea
        backgroundColor="#fff"
      >
        <view :class="ns.b('popup-container')">
          <view :class="ns.b('popup-header')">
            <view>选择数据</view>
          </view>
          <view :class="ns.b('popup-content')">
            <!-- 预览列表 -->
            <template v-if="c.state.items.length === 0">
              <iBizNoData
                v-if="c.state.isLoaded"
                :text="c.model.emptyText"
                :emptyTextLanguageRes="c.model.emptyTextLanguageRes"
              ></iBizNoData>
            </template>
            <template v-else>
              <view
                v-for="item in c.state.items"
                :class="[
                  ns.b('item'),
                  ns.is(
                    'active',
                    c.state.selectedData.findIndex((data) => data.srfkey === item.srfkey) !== -1,
                  ),
                ]"
                :key="item.srfkey"
              >
                <text>{{ item.srfmajortext || '' }}</text>
                <uni-icons :class="ns.e('item-icon')" type="trash-filled" size="26"></uni-icons>
                <!-- TODO 右侧箭头 -->
                <!-- <view>></view> -->
              </view>
            </template>
          </view>
        </view>
      </uni-popup>
      <!-- 绘制加载更多 -->
      <view :class="ns.b('load-more')" @click="c.loadMore">
        <text>加载更多</text>
      </view>
    </template>
  </iBizControlBase>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { IDEList } from '@ibiz/model-core'
import { ListController } from '@ibiz-template/runtime'
import { useControlController, useNamespace } from '@/use'

const props = defineProps({
  modelData: { type: Object as PropType<IDEList>, required: true },
  context: { type: Object as PropType<IContext>, required: true },
  params: { type: Object as PropType<IParams>, default: () => ({}) },
  /**
   * 部件行数据默认激活模式
   * - 0 不激活
   * - 1 单击激活
   * - 2 双击激活(默认值)
   *
   * @type {(number | 0 | 1 | 2)}
   */
  mdctrlActiveMode: { type: Number, default: 1 },

  /**
   * 是否为单选
   * - true 单选
   * - false 多选
   *
   * @type {(Boolean)}
   */
  singleSelect: { type: Boolean, default: true },
  // 默认行数
  rowsCount: { type: Number, default: 2 },
  // 默认列数
  columnsCount: { type: Number, default: 5 },

  loadDefault: { type: Boolean, default: true },

  mode: { type: String, default: 'LIST' },
})

const c = useControlController((...args) => new ListController(...args))

const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`)
const ns2 = useNamespace(`control-mobmdctrl`)

const reviewListRef = ref()

const openReviewList = () => {
  // showPicker.value = true
  console.log('reviewListRef', reviewListRef.value)
}

const isSelect = (row: IData) => {
  const findIndex = c.state.selectedData.findIndex((data) => {
    return data.srfkey === row.srfkey
  })
  return findIndex !== -1
}
const calcItemClass = (row: IData) => {
  const select = isSelect(row)
  const itemClass = [ns.b('item'), ns.is('active', select)]
  return itemClass
}
</script>
<style lang="scss">
@import './i-biz-list-control';
</style>
